<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>模板管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/layuimini/lib/layui-v2.5.5/css/layui.css}"
          href="../../../static/layuimini/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" th:href="@{/layuimini/css/public.css}" href="../../../static/layuimini/css/public.css"
          media="all">
    <style>
        body .layui-layer-btn {
            background-color: #F8F8F8;
            border-top: 1px solid #eee;
            padding-top: 10px;
        }

        .flow-default li {
            display: inline-block;
            margin: 0 5px;
            font-size: 14px;
            width: 300px;
            margin-bottom: 10px;
            text-align: left;
            background-color: #eee;
            padding: 5px;
            box-sizing: content-box;
        }
        .flow-default li p{
            line-height: 32px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-card">
            <div class="layui-card-header">
                <div class="layui-upload">
                    <button type="button" class="layui-btn btn- layui-btn-normal" id="test8">选择模板文件</button>
                    <button type="button" class="layui-btn" id="test9">开始上传</button>
                </div>
            </div>
            <div class="layui-card-body">
                <ul class="flow-default" id="LAY_demo1">

                </ul>
            </div>
        </div>




    </div>
</div>
<script th:src="@{/layuimini/lib/layui-v2.5.5/layui.js}" src="../../../static/layuimini/lib/layui-v2.5.5/layui.js"
        charset="utf-8"></script>
<script th:src="@{/layuimini/js/lay-config.js?v=2.0.0}" src="../../static/layuimini/js/lay-config.js?v=2.0.0" charset="utf-8"></script>
<script>
    layui.use(['miniTab','upload','flow'], function () {
        var $ = layui.jquery,
            upload = layui.upload,
            miniTab = layui.miniTab,
            flow = layui.flow;

        miniTab.render({});
        //选完文件后不自动上传
        upload.render({
            elem: '#test8'
            , url: '/manage/template/upload' //改成您自己的上传接口
            , auto: false
            //,multiple: true
            , bindAction: '#test9'
            , exts:'zip'
            , done: function (res) {
                if (res.success){
                    layer.msg("上传成功", {shift: -1, time: 500}, function () {
                        location.reload();
                    });
                }else{
                    layer.msg(res.msg);
                }
            }
        });

        flow.load({
            elem: '#LAY_demo1' //流加载容器
            ,scrollElem: '#LAY_demo1'
            ,done: function(page, next){ //执行下一页的回调
                var lis = [];
                //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                $.get('[[@{/}]]manage/template/list?page='+page, function(res){
                    //假设你的列表返回在data集合中
                    layui.each(res.data, function(index, item){
                        lis.push('<li>\n' +
                            '   <p style="font-size: 18px"><a href="javascript:;" target="_blank" layuimini-href="'+item.templatePage+'">'+item.templateName+'</a></p>\n' +
                            '   <img width="300" height="150" src="'+item.cover+'" alt="">\n' +
                            '   <p>作者：<a href="javascript:;" target="_blank" layuimini-href="'+item.authorHomePage+'">'+item.author+'</a></p>\n' +
                            '   <p style="height: 58px;overflow:hidden;line-height: normal">描述：'+item.templateDesc+'</p>\n' +
                            '   <p><button data-id="'+item.templateId+'" class="btn-enable layui-btn layui-btn-sm '+(item.status==1?'layui-btn-disabled disabled':'')+'">启用</button>' +
                            '   <button data-id="'+item.templateId+'" class="btn-delete layui-btn layui-btn-sm layui-btn-danger '+(item.templateDir=='default'||item.status==1?'layui-btn-disabled disabled':'')+'">删除</button></p>\n' +
                            '</li>');
                    });

                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                    next(lis.join(''), page < res.pages);
                });
            }
        });


        $('body').on('click','.btn-enable',function () {
            var that = this;
            if($(this).hasClass('layui-btn-disabled')){
                return false;
            }
            var templateId = $(this).attr('data-id');
            layer.load();
            $.ajax({
                type: 'get',
                url: '[[@{/}]]manage/template/enable',
                data: {templateId: templateId},
                dataType: 'json',
                success: function (result) {
                    console.log(result);
                    if (result.success) {
                        layer.msg("操作成功",{ shift: -1, time: 500 },function () {
                            location.reload();
                        });

                    } else {
                        layer.msg(result.msg);
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    layer.msg(textStatus);
                },
                complete: function () {
                    layer.closeAll('loading');
                }
            });
        });

        $('body').on('click','.btn-delete',function () {
            var that = this;
            if($(this).hasClass('layui-btn-disabled')){
                return false;
            }
            var templateId = $(that).attr('data-id');
            layer.confirm('真的删除么', function (index) {
                layer.load();
                $.ajax({
                    type: 'get',
                    url: '[[@{/}]]manage/template/delete',
                    data: {templateId: templateId},
                    dataType: 'json',
                    success: function (result) {
                        console.log(result);
                        if (result.success) {
                            layer.msg("操作成功",{ shift: -1, time: 500 },function () {
                                location.reload();
                            });

                        } else {
                            layer.msg(result.msg);
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        layer.msg(textStatus);
                    },
                    complete: function () {
                        layer.closeAll('loading');
                    }
                });
            });
        });

    });
</script>

</body>
</html>